<script setup>
import ItemPage from '@/components/ItemPage.vue'
import { inject, ref } from 'vue'
// 获取数据赋值
const axios = inject('axios')
const echarts = inject('echarts')
const dataList = ref([])
async function fetchData() {
  const response = await axios.get('/api/chartTwo/data')
  // console.log(response.data.data.chartData)
  dataList.value = response.data.data.chartData
}
// 坐标轴赋值
const xData = ref([])
const clothesData = ref([])
const digitData = ref([])
const householdElectricalData = ref([])
const houseHomeData = ref([])
const dailyUseChemicalData = ref([])
// 获取数据方法
const setData = () => {
  xData.value = dataList.value.day
  clothesData.value = dataList.value.num.Clothes
  digitData.value = dataList.value.num.digit
  householdElectricalData.value = dataList.value.num.Electrical
  houseHomeData.value = dataList.value.num.gear
  dailyUseChemicalData.value = dataList.value.num.Chemicals
}
// 异步执行后获取数据渲染echarts
let myChart
const refItemTwo = ref(null)
fetchData().then(() => {
  setData()
  myChart = echarts.init(refItemTwo.value.$el)
  const option = {
    title: {
      text: '产品月销',
      textStyle: {
        color: '#fff',
        fontSize: 20
      }
    },
    // 设置grid总体
    grid: {
      top: '30%',
      left: '12%',
      right: '10%',
      bottom: '15%'
      // show: true
    },
    // 设置提示框
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['服饰', '数码', '家电', '家居', '日化'],
      borderRadius: 5,
      top: '17%',
      width: 400,
      itemWidth: 18,
      itemHeight: 12,
      // 图例文字设置
      textStyle: {
        color: '#000'
      },
      // 图例每项中间线设置
      lineStyle: {
        width: 0,
        inactiveWidth: 0
      },
      // 图例每项设置
      itemStyle: {},
      itemGap: 15
    },
    xAxis: {
      type: 'category',
      data: xData.value,
      axisLabel: {
        color: '#fff'
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '服饰',
        type: 'line',
        data: clothesData.value,
        // 开启平滑线
        smooth: true,
        // 控制数据堆叠
        stack: 'Total',
        // 设置折线的区域面积
        areaStyle: {
          opacity: 0.6
        }
      },
      {
        name: '数码',
        type: 'line',
        // 开启平滑线
        smooth: true,
        data: digitData.value,
        stack: 'Total',
        areaStyle: {
          opacity: 0.6
        }
      },
      {
        name: '家电',
        type: 'line',
        // 开启平滑线
        smooth: true,
        data: householdElectricalData.value,
        stack: 'Total',
        areaStyle: {
          opacity: 0.6
        }
      },
      {
        name: '家居',
        type: 'line',
        // 开启平滑线
        smooth: true,
        data: houseHomeData.value,
        stack: 'Total',
        areaStyle: {
          opacity: 0.6
        }
      },
      {
        name: '日化',
        type: 'line',
        // 开启平滑线
        smooth: true,
        data: dailyUseChemicalData.value,
        stack: 'Total',
        areaStyle: {
          opacity: 0.6
        }
      }
    ]
  }
  myChart.setOption(option)
})
window.addEventListener('resize', () => {
  myChart.resize()
})
</script>
<template>
  <ItemPage ref="refItemTwo"></ItemPage>
</template>
<style lang="scss" scoped></style>
